/**
在 React 中，CSS 和 LESS 模块编写方式被广泛使用，以实现组件的样式管理和复用。
  1. CSS 模块
  基本概念
  - CSS 模块是一种局部作用域的 CSS 方案，允许你在组件中使用 CSS，而不会导致全局命名冲突。每个 CSS 类名在编译时被转换为唯一的标识符。

  编写方式
  - 创建一个以  `.module.css`  结尾的 CSS 文件，例如  `styles.module.css` 。
  - 在 React 组件中导入这个 CSS 模块，并使用它的类名。

  示例：

  styles.module.css
  .container {
    background-color: lightblue;
    padding: 20px;
  }

  .title {
    font-size: 24px;
    color: darkblue;
  }
  MyComponent.jsx
  jsx
  import React from 'react';
  import styles from './styles.module.css';

  const MyComponent = () => {
    return (
      <div className={styles.container}>
        <h1 className={styles.title}>Hello, World!</h1>
      </div>
    );
  };

  export default MyComponent;
  2. LESS 模块
  基本概念
  - LESS 模块与 CSS 模块类似，但它使用 LESS 预处理器的特性，支持变量、嵌套和混入等功能。LESS 模块也可以避免全局命名冲突。

  编写方式
  - 创建一个以  `.module.less`  结尾的 LESS 文件，例如  `styles.module.less` 。
  - 在 React 组件中导入这个 LESS 模块，并使用它的类名。
  示例：
  styles.module.less
  less
  @primary-color: lightblue;

  .container {
    background-color: @primary-color;
    padding: 20px;

    .title {
      font-size: 24px;
      color: darkblue;
    }
  }
  MyComponent.jsx
  jsx
  import React from 'react';
  import styles from './styles.module.less';

  const MyComponent = () => {
    return (
      <div className={styles.container}>
        <h1 className={styles.title}>Hello, World!</h1>
      </div>
    );
  };

  export default MyComponent;
  3. 总结
  - CSS 模块：提供了局部作用域的 CSS，避免了全局命名冲突，适合于简单的样式管理。
  - LESS 模块：结合了 LESS 的强大功能，如变量和嵌套，同时也提供了局部作用域，适合于复杂的样式管理。
 */
import React, { PureComponent } from 'react'
import Home from './home'
import Profile from './profile'
import About from './about'

export default class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      titleSize: 20
    }
  }

  addTitleSize() {
    this.setState({
      titleSize: this.state.titleSize + 1
    })
  }
  
  render() {
    const { titleSize } = this.state
    
    return (
      <div>
        <h3>1. 内联样式</h3>
        <button onClick={e => this.addTitleSize()}>增加标题字号</button>
        <p style={{ color: 'red', fontSize: titleSize }}>Hello, World!</p>
        
        <h3>2. 普通的CSS写法</h3>
        <Home/>

        <h3>3. CSS_Modules</h3>
        <Profile/>

        <h3>4. Less编写方式</h3>
        <About/>
      </div>
    )
  }
}
